<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2021/11/8
  Time: 19:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Pixiv</title>
    <script src = "../common/jquery3.6.0.js"></script>
    <style type = "text/css">
        *{
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body>
<!--背景图片-->
<img src="/pixiv/RegisterServlet?appType=initRegister"
     style = "background-color:white;width:100%;height:100%;" >
<input type = "button" id = "gotoLogin" value = "登录">
<div id = "loginRegisterBackground">
    <div><p>Pixiv</p><p>用户注册</p></div>

    <input type = "text" id = "User" value = "" placeholder="输入用户名">
    <input type = "password" id = "Password" value = "" placeholder="输入密码">
    <input type = "password" id = "QueryPassword" value = "" placeholder="确认密码">
    <input type = "text" id = "QueryCode" value = "" placeholder="验证码">
    <img width = "40%" height= "40px" style = "position:relative;top:15px;" id = "CodePicture"
         onclick = "javascript:this.src = '/pixiv/RegisterCodeServlet?appType=GetCode&' + new Date().getTime()">

    <div id = "Tip">错误选项</div>
    <input type = "button" id = "LoginButton" value = "注册账号">
    <p></p>
</div>
<div id = "loginBottomCover">

</div>
<script type = "text/javascript">
    setTipHiden();
    var btn = document.querySelector("#LoginButton");
    btn.onclick = function(){
        var user = document.querySelector("#User").value;
        var password = document.querySelector("#Password").value;
        var queryword = document.querySelector("#QueryPassword").value;
        var code = document.querySelector("#QueryCode").value;

        if (password != queryword)
        {
            sendTipVal("两次密码输入不正确");
            return;
        }

        $.ajax({
            url:"/pixiv/RegisterUserServlet",
            data:{"appType":"SendRegisterPacket",User:user,PWD:password,Code:code},
            dataType:"json",
            type:"post",
            success:function(req){
                if (req.flag == 0) {
                    sendTipVal("已经存在的用户");
                }else if (req.flag == 1) {
                    sendTipVal("验证码错误");
                }else if (req.flag == 2) {
                    sendTipVal("注册用户成功");
                    btn.disabled = true;
                    btn.style.enable = false;
                    setTimeout("gotoLogin()",1500);

                }
            }
        });
    }

    //init初始化验证码图片
    var Code = document.querySelector("#CodePicture");
    Code.click();

    document.querySelector("#gotoLogin").addEventListener("click",gotoLogin );

    function gotoLogin()
    {
        $.ajax({
            url:"/pixiv/LoginServlet",
            data:{"appType":"InitGotoLogin"},
            dataType:"json",
            type:"post",
            success:function(req)
            {
                if (req.flag == 1)
                    location.href = "login.jsp";
            }
        })
    }

    function sendTipVal(information)
    {
        var Tip = document.querySelector("#Tip");
        Tip.style.display = "block";
        Tip.innerHTML = information;
        setTimeout("setTipHiden()", 2000);
    }
    function setTipHiden(){
        var Tip = document.querySelector("#Tip");
        Tip.style.display = "none";
    }
    function setTipShow(){
        var Tip = document.querySelector("#Tip");
        Tip.style.display = "block";
    }

</script>
<style type = "text/css">
    #loginRegisterBackground{
        position:absolute;
        width:26%;
        height:500px;
        left:37%;
        top:150px;
        background-color:rgba(255,255,255,0.8);
        z-index:5;
        text-align:center;
    }
    #loginRegisterBackground>div:nth-child(1)
    {
        width:100%;
        height:100px;
        text-align:center;
    }
    #User{
        margin-top:3px;
        border-radius:0px;
        border:0px;
        width:80%;
        height:40px;
    }
    #gotoLogin{
        position:absolute;
        width:10%;
        left:90%;
        height:30px;
        border-radius:15px;
        border:0px;
        background-color:rgba(143,147,204,1.0);
        color:rgba(255,255,255,1.0);
        font-size:15px;
    }
    #gotoLogin:hover{
        background-color:rgba(125,115,173,1.0);
     }
    #Password{
        margin-top:3px;
        border-radius:0px;
        border:0px;
        width:80%;
        height:40px;
    }
    #QueryPassword{
        margin-top:3px;
        border-radius:0px;
        border:0px;
        width:80%;
        height:40px;
    }
    #QueryCode{
        text-align:left;
        border-radius:0px;
        border:0px;
        width:40%;
        left:-20%;
        height:40px;
    }
    #LoginButton{
        margin-top:10px;
        position:relative;
        width:80%;
        height:40px;
        border-radius:15px;
        border:0px;
        background-color:rgba(143,147,204,1.0);
        color:rgba(250,250,250,1.0);
        font-size:15px;
    }
    #Tip{
        font-size:12px;
    }
    #LoginButton:hover{
        background-color:rgba(125,115,173,1.0);
    }
    #loginBottomCover{
        width:100%;
        position:absolute;
        left:0px;
        top:95%;
        height:5%;
        background-color:rgba(0,0,0,0.9);
        z-index:6;
    }
</style>
</body>
</html>
